<template>
  <div class="dashboard">
    <!-- WebSocket 连接状态 -->
    <div class="websocket-status">
      <el-tag :type="wsConnected ? 'success' : 'danger'" effect="dark">
        WebSocket {{ wsConnected ? "连接正常 ✅" : "断开 ❌" }}
      </el-tag>
    </div>

    <!-- 服务状态 -->
    <div class="service-grid">
      <div
          v-for="service in serviceStatus"
          :key="service.name"
          :class="['service-card', getCardClass(service.status)]"
      >
        <div class="icon">
          <i :class="getServiceIcon(service.name)"></i>
        </div>
        <div class="info">
          <h3>{{ service.name }}</h3>
          <el-tag :type="getTagType(service.status)" class="status-tag">
            {{ service.status }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ServerMonitor",
  data() {
    return {
      serviceStatus: [
        { name: "Nginx", status: "未知" },
        { name: "Redis", status: "未知" },
        { name: "Nacos", status: "未知" },
        { name: "MySQL", status: "未知" },
        { name: "Mediamtx", status: "未知" }
      ],
      wsConnected: false
    };
  },
  methods: {
    connectWebSocket() {
      const ws = new WebSocket("ws://localhost:9090/ws/server-status");

      ws.onopen = () => {
        this.wsConnected = true;
      };

      ws.onmessage = (event) => {
        const statusData = JSON.parse(event.data);
        this.serviceStatus = [
          { name: "Nginx", status: statusData.nginx },
          { name: "Redis", status: statusData.redis },
          { name: "Nacos", status: statusData.nacos },
          { name: "MySQL", status: statusData.mysql },
          { name: "Mediamtx", status: statusData.mediamtx }
        ];
      };

      ws.onerror = () => {
        this.wsConnected = false;
      };

      ws.onclose = () => {
        this.wsConnected = false;
        setTimeout(this.connectWebSocket, 5000);
      };
    },
    getTagType(status) {
      if (status === "运行中") return "success"; // 绿色
      if (status === "停止") return "danger"; // 红色
      return "warning"; // 橙色
    },
    getCardClass(status) {
      if (status === "运行中") return "running";
      if (status === "停止") return "stopped";
      return "unknown";
    },
    getServiceIcon(serviceName) {
      const icons = {
        Nginx: "el-icon-cloudy",
        Redis: "el-icon-data-line",
        Nacos: "el-icon-monitor",
        MySQL: "el-icon-coin",
        Mediamtx: "el-icon-video-camera"
      };
      return icons[serviceName] || "el-icon-warning";
    }
  },
  mounted() {
    this.connectWebSocket();
  }
};
</script>

<style scoped>
/* 整个仪表盘 */
.dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 90vh;
  border-radius: 15px;
  background: linear-gradient(135deg, #eef2f3, #dfe9f3);
}

/* WebSocket 状态 */
.websocket-status {
  margin-bottom: 20px;
  font-size: 16px;
}

/* 服务状态网格 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  width: 80%;
  max-width: 1000px;
}

/* 服务状态卡片 */
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 让内容垂直居中 */
  align-items: center; /* 让内容水平居中 */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  text-align: center;
  color: white;
  height: 200px; /* 确保卡片有一定的高度 */
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 不同状态颜色 */
.running {
  background: #28a745;
}
.stopped {
  background: #dc3545;
}
.unknown {
  background: #ffc107;
}

/* 服务图标 */
.icon {
  font-size: 40px;
  margin-bottom: 10px;
}

/* 服务名称 */
.info h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 状态标签 */
.status-tag {
  font-size: 14px;
  padding: 1px 12px;
}
</style>
